<template>
  <!-- 审核流程配置 -->
  <el-timeline>
    <el-timeline-item
      v-for="(item, index) in configList"
      :key="index"
      center
      :timestamp="item.time"
      placement="top"
      size="large"
      :type="item.type"
      :color="item.color"
      :icon="item.icon"
    >
      <el-card v-if="item.node == 'start'">
        <div class="startNode">
          <div class="round">{{ item.shortName }}</div>
          <p>{{ item.username }}: 发起{{ this.auditTitle }}审批</p>
        </div>
      </el-card>
      <!-- <el-card
          v-for="info in item.list"
          :key="info.id"
          :style="{ opacity: info.examinePreStatus == 0 ? 0.5 : 1 }"
        > -->
      <template v-if="item.node !== 'start' && item.node !== 'end'">
        <el-card v-if="item.auditType == 1">
          <div class="node" v-if="isReloadData">
            <div class="topInfo">
              <div class="round">
                {{ item.auditName.substr(-1) }}
              </div>
              <div class="info">
                <p>{{ item.auditTime }}</p>
                <p>
                  {{ item.auditName }}:
                  {{
                    item.examineStatus == 0
                      ? "待审核"
                      : item.examineStatus == 1
                      ? "通过"
                      : "未通过"
                  }}
                </p>
              </div>
            </div>
            <p class="remark" v-if="item.opinion">意见：{{ item.opinion }}</p>
            <div class="file" v-if="item.examineFiles" style="width: 100%">
              <!-- <p>附件：</p> -->
              <other-files
                ref="otherFiles"
                :files="item.examineFiles"
              ></other-files>
            </div>
            <div class="successButton icon" v-if="item.examineStatus == 1">
              <el-icon><el-icon-check /></el-icon>
            </div>
            <div class="closeButton icon" v-if="item.examineStatus == 2">
              <el-icon><el-icon-close /></el-icon>
            </div>
          </div>
        </el-card>
        <el-card
          v-if="item.auditType !== 1"
          v-for="sunItem in item.examineUsers"
          :key="sunItem.id"
        >
          <div class="node" v-if="isReloadData">
            <div class="topInfo">
              <div class="round">
                {{ sunItem.auditName.substr(-1) }}
              </div>
              <div class="info">
                <p>{{ sunItem.auditTime }}</p>
                <p>
                  {{ sunItem.auditName }}:
                  {{
                    sunItem.status == 0
                      ? "待审核"
                      : sunItem.status == 1
                      ? "通过"
                      : "未通过"
                  }}
                </p>
              </div>
            </div>
            <p class="remark" v-if="sunItem.opinion">
              意见：{{ sunItem.opinion }}
            </p>
            <div class="file" v-if="sunItem.examineFiles">
              <other-files
                ref="otherFiles"
                :files="sunItem.examineFiles"
              ></other-files>
            </div>
            <div class="successButton icon" v-if="sunItem.status == 1">
              <el-icon><el-icon-check /></el-icon>
            </div>
            <div class="closeButton icon" v-if="sunItem.status == 2">
              <el-icon><el-icon-close /></el-icon>
            </div>
          </div>
        </el-card>
      </template>

      <el-card v-if="item.node == 'end'">
        <div class="endNode">
          <p>
            审批{{
              item.examineStatus == 0
                ? "审核中"
                : item.examineStatus == 1
                ? "通过"
                : "未通过"
            }}
          </p>
          <p>此流程{{ item.examineStatus != 0 ? "已结束" : "进行中" }}</p>
        </div>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</template>
<script>

import otherFiles from '@/components/otherFiles'
export default {
  name: 'checkProcess',
  emits: ['updatePage'],
  data () {
    return {
      userId: '',
      configList: [],
      loading: false,
      isReloadData: true,//局部刷新标识
      auditTitle: ''
    }
  },
  components: {
    otherFiles,
  },
  props: {
    id: {
      require: true,
      type: String
    },
    type: {
      require: true,
      type: Number
    },
  },
  mounted () {
    let userInfo = this.$TOOL.data.get('USER_INFO')
    this.userId = userInfo.userId
    // 获取审批流程配置
    this.getCheckConfigDetail()
    // 获取流程类型名称
    this.getDictsortDetailOne()
  },
  methods: {
    async getDictsortDetailOne () {
      let param = {
        code: 'streamCode',
        value: this.type
      }
      let res = await this.$API.common.detail.getDictsortDetailOne.get(param)
      this.auditTitle = res.data.name
    },
    // 获取审批流程配置
    async getCheckConfigDetail () {
      let param = {
        id: this.id,
        type: this.type
      }
      let { data } = await this.$API.common.detail.getCheckConfigDetail.get(param)
      this.configList = data
      console.log('data')
      console.log(data)
      let startNode = this.configList[0] && {
        node: 'start',
        time: this.configList[0].createTime,
        username: this.configList[0].applicantName,
        shortName: this.configList[0].applicantName && this.configList[0].applicantName.substr(-1),
        type: 'primary',//primary / success / warning / danger / info
        icon: '',
      }

      let endNode = {
        node: 'end',
        // time: item.auditTime,
        // status: this.configList[0].status,
        // type: this.configList[0].status == 0 ? 'warning' : (this.configList[0].status == 1 ? 'success' : 'danger'),
        // icon: this.configList[0].status == 0 ? null : (this.configList[0].status == 1 ? 'el-icon-check' : 'el-icon-close')
      }
      this.configList.forEach(item => {
        let str = item.addSignType !== 0 ? '加签：' : ''
        item.time = item.auditType == 1 ? `${str}依次顺序审核` : (item.auditType == 2 ? `${str}会签（可同时审批，每个人必须审批通过）` : `${str}或签(有一人审批通过即可)`)
        item.icon = item.status == 0 ? null : (item.status == 1 ? 'el-icon-check' : 'el-icon-close')
        item.type = item.status == 0 ? 'warning' : (item.status == 1 ? 'success' : 'danger')

        endNode.type = item.status == 0 ? 'warning' : (item.status == 1 ? 'success' : 'danger')
        endNode.icon = item.status == 0 ? null : (item.status == 1 ? 'el-icon-check' : 'el-icon-close')
      })

      this.configList.some(item => {
        if (item.examineStatus == 2) {
          endNode.examineStatus = 2
          return true

        } else {
          endNode.examineStatus = item.status
          return false
        }
      })

      this.configList.unshift(startNode)
      this.configList.push(endNode)
      console.log(this.configList)
    },

    relodPart () {
      this.configList = []
      this.getCheckConfigDetail()
      this.isReloadData = false
      this.$nextTick(() => {
        this.isReloadData = true
      })
      this.$emit('updatePage')
    },


  }
}
</script>
<style lang="scss" scoped>
.el-card {
  width: 20%;
  margin-right: 20px;
  margin-bottom: 20px;
  .startNode {
    display: flex;
    align-items: center;
  }
  .node {
    position: relative;
    .icon {
      position: absolute;
      top: 0;
      right: 0;
      width: 30px;
      height: 30px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      font-size: 20px;
      font-weight: 600;
    }
    .successButton {
      background: #67c23a;
    }
    .closeButton {
      background: #f56c6c;
    }
    .topInfo {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    .remark {
      // margin-left: 45px;
      margin-bottom: 10px;
    }
    .handleButton {
      float: right;
      margin: 15px 0;
    }
  }

  .endNode {
    p:first-child {
      // font-size: 16px;
    }
    p:last-child {
      // font-size: 14px;
      color: #ccc;
    }
  }

  .round {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    margin-right: 10px;
    background-color: #409eff;
    color: #fff;
  }
  .info {
    p:first-child {
      line-height: 1.2em;
      font-size: 12px;
      color: #909399;
    }
    p:last-child {
      // font-size: 14px;
    }
  }
}

:deep(.el-timeline-item__content) {
  display: flex;
  flex-wrap: wrap;
}

.waitCheck {
  opacity: 0.5;
}
</style>